﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Contact Book</title>
    <link href="Content/default.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/ContactsLibrary.js"></script>
</head>
<body>
    <div id="container">
        <header>
            <hgroup id="headerText">
                <h1>Contacts</h1>
            </hgroup>
        </header>
        <div role="main">
            <table id="contacts">
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Name</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <div id="editContact">
                <h2 id="currentAction"></h2>
                <div>
                    <label for="firstName">First Name:</label>
                    <input type="text" id="firstName" name="firstName" />
                </div>
                <div>
                    <label for="lastName">Last Name:</label>
                    <input type="text" id="lastName" name="lastName" />
                </div>
                <div>
                    <label for="email">Email Address:</label>
                    <input type="email" id="email" name="email" />
                </div>
                <div>
                    <label for="phoneNumber">Phone Number:</label>
                    <input type="text" id="phoneNumber" name="phoneNumber" />
                </div>
                <div class="buttons">
                    <button id="btnSave" name="save">Save</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
